<template>
	<view class="chessboard">
		<view class="content">
			<view class="board-row" v-for="(boardRow, outInd) in pathWay" :key="Math.random() + ''">
				<template v-for="(chesses, innerInd) in boardRow">
					<view :class="[
							'chess',
							chesses === 0 ? 'none' : chesses === 2 ? 'start' : chesses === 3 ? 'end' : 'normal',
							(outInd - 1 === -1 || pathWay[outInd - 1][innerInd] === 0) && (innerInd - 1 === -1 || boardRow[innerInd - 1] === 0) ? 'border-top-left' : '',
							(outInd + 1 === 15 || pathWay[outInd + 1][innerInd] === 0) && (innerInd - 1 === -1 || boardRow[innerInd - 1] === 0) ? 'border-bottom-left' : '',
							(outInd + 1 === 15 || pathWay[outInd + 1][innerInd] === 0) && (innerInd + 1 === 7 || boardRow[innerInd + 1] === 0) ? 'border-bottom-right' : '',
							(outInd - 1 === -1 || pathWay[outInd - 1][innerInd] === 0) && (innerInd + 1 === 7 || boardRow[innerInd + 1] === 0) ? 'border-top-right' : ''
						]" :style="{
							height: chessHeight,
							backgroundColor: threeColor[randomList[outInd * 7 + innerInd]][0],
							boxShadow: `0 10rpx 0 ${threeColor[randomList[outInd * 7 + innerInd]][1]}`
						}" :key="Math.random() + ''" :data-index="`${outInd}-${innerInd}`" :data-ifShow="chesses !== 0"
						:data-start="chesses && chesses.pointType === 2">
						{{ chesses.index ? chesses.index : '' }}
						<image v-if="chesses.pointType === 3" src="../../static/pic/endAdd.png" mode=""
							:style="{ width: chessHeight, height: chessHeight }"></image>
					</view>
				</template>
			</view>
		</view>
		<view class="rules"
			:style="{width: `${chessHeightNum * 5}px`, height: `${chessHeightNum * 8}px`, top: `${rulesTop}px` }">
			<view class="title">游戏规则</view>
			<view class="contents">
				<view>1.摇骰子自动走棋</view>
				<view>2.每个格子都有任务,也可自行商量执行其他任务</view>
				<view>3.先到终点者胜利</view>
			</view>
			<view :class="['dice', ifRolling ? 'rolling' : '']" @tap="rollDie">
				<image :src="diceImage" mode=""></image>
				<view class="tip">点击摇骰</view>
			</view>
		</view>
		<image :class="[transition ? 'transition' : '', manTrans.moving ? 'moving' : '']"
			:style="{ left: `${manTrans.left}px`, top: `${manTrans.top}px`, width: chessHeight }"
			src="../../static/pic/man.png" mode="widthFix">
		</image>
		<image :class="[transition ? 'transition' : '', womanTrans.moving ? 'moving' : '']"
			:style="{ left: `${womanTrans.left}px`, top: `${womanTrans.top}px`, width: chessHeight }"
			src="../../static/pic/woman.png" mode="widthFix">
		</image>
	</view>
</template>

<script>
	import {
		pathWay,
		threeColors,
		command
	} from "./default.js"
	export default {
		name: 'fly',
		data() {
			return {
				pathWay,
				threeColors,
				command,
				chessHeight: '',
				threeColor: [],
				randomList: [],
				type: -1,
				allIndex: 0,
				manTrans: {
					top: 0,
					left: 0,
					moving: false
				},
				womanTrans: {
					top: 0,
					left: 0,
					moving: false
				},
				currentNode: undefined,
				transition: false,
				chessHeightNum: 0,
				rulesTop: 0,
				diceImage: '../../static/pic/dice/1dian.png',
				dieScrollPo: 0,
				interval: {},
				ifRolling: false,
				runSex: -1
			}
		},
		onLoad(options) {
			this.type = options.type || -1
			this.threeColor = this.threeColors[this.type]
			for (let i = 0; i < 105; i++) {
				this.randomList.push(Math.floor(Math.random() * this.threeColor.length))
			}
			this.randerPath()
		},
		mounted() {
			this.pathWayAdd()
			// top修正
			setTimeout(() => {
				this.pathWayAdd()
				setTimeout(() => {
					this.pathWayAdd(true)
					setTimeout(() => {
						this.transition = true
					}, 1000)
				}, 600)
			}, 600)
		},
		methods: {
			randerPath() {
				let startPoint = []
				for (let i = 0; i < this.pathWay.length; i++) {
					let row = this.pathWay[i]
					for (let j = 0; j < row.length; j++) {
						if (row[j] === 2) {
							startPoint = [i, j]
						}
					}
				}
				this.setNextPoint(startPoint, true)
			},
			setNextPoint(point, ifFirst = false) {
				let lastPoint = this.getPointDetail(point).lastPoint || false
				let nextPoint = []
				let roundPoints = [
					[point[0] - 1, point[1]],
					[point[0], point[1] + 1],
					[point[0] + 1, point[1]],
					[point[0], point[1] - 1]
				]
				for (let i = 0; i < 4; i++) {
					let currentPoint = roundPoints[i]
					if (
						currentPoint[0] === -1 ||
						currentPoint[0] === 15 ||
						currentPoint[1] === -1 ||
						currentPoint[1] === 7 ||
						this.getPointDetail(currentPoint) === 0
					) continue
					if (
						lastPoint &&
						lastPoint.length &&
						lastPoint[0] === currentPoint[0] &&
						lastPoint[1] === currentPoint[1]
					) continue
					nextPoint = currentPoint
					break
				}
				this.setPointDetail(point, ifFirst, nextPoint)
				this.pathWay[nextPoint[0]][nextPoint[1]] = {
					pointType: this.getPointDetail(nextPoint),
					lastPoint: point,
					left: 0,
					top: 0
				}
				if (this.getPointDetail(nextPoint).pointType !== 3) {
					this.setNextPoint(nextPoint)
				}
			},
			setPointDetail(point, ifFirst, nextPoint) {
				if (ifFirst) {
					this.pathWay[point[0]][point[1]] = {
						pointType: 2,
						nextPoint
					}
					return
				}
				let contentMaps = this.command[this.type]
				this.pathWay[point[0]][point[1]] = {
					...this.getPointDetail(point),
					index: ++this.allIndex,
					content: contentMaps[Math.floor(Math.random() * contentMaps.length)],
					nextPoint,
				}
			},
			getPointDetail(point) {
				return this.pathWay[point[0]][point[1]]
			},
			pathWayAdd(ifLast = false) {
				uni.createSelectorQuery().selectAll('.chess').boundingClientRect(data => {
					this.chessHeightNum = data[0].width - 2
					this.chessHeight = `${data[0].width - 2}px`
					for (let i = 0; i < data.length; i++) {
						let currentData = data[i]
						let dataSet = currentData.dataset
						if (dataSet.ifshow) {
							let currentNode = dataSet.index.split("-")
							this.pathWay[currentNode[0]][currentNode[1]].left = currentData.left
							this.pathWay[currentNode[0]][currentNode[1]].top = currentData.top
							if (dataSet.start) {
								let node = this.getPointDetail(currentNode)
								this.currentNode = [node, node]
								this.handleChangeCurrentNode()
							}
						}
						if (dataSet.index === '7-1') {
							this.rulesTop = currentData.top + 10
						}
					}
					if (ifLast) console.log("pathWay---> ", this.pathWay)
				}).exec()
			},
			rollDie() {
				this.dieScrollPo = 0
				this.ifRolling = true
				let scrollMap = ['A', 'B', 'C', 'D']
				this.interval = setInterval(() => {
					this.diceImage = `../../static/pic/dice/d${scrollMap[(this.dieScrollPo++) % 4]}.png`
				}, 100)
				setTimeout(() => {
					this.dieStop()
				}, 1000)
			},
			dieStop() {
				clearInterval(this.interval)
				this.ifRolling = false
				this.runSex = this.runSex === -1 || this.runSex === 1 ? 0 : 1
				this.$nextTick(() => {
					let point = Math.floor(Math.random() * 6) + 1
					this.diceImage = `../../static/pic/dice/${point}dian.png`
					let inter = setInterval(() => {
						if (point--) {
							this.currentNode[this.runSex] = this.getPointDetail(this.currentNode[this
								.runSex].nextPoint)
							this[this.runSex ? 'manTrans' : 'womanTrans'].moving = true
							this.handleChangeCurrentNode()
						} else {
							clearInterval(inter)
							this[this.runSex ? 'manTrans' : 'womanTrans'].moving = false
						}
					}, 1000)
				})
			},
			handleChangeCurrentNode() {
				let newVal = this.currentNode
				if (this.runSex === -1) {
					this.manTrans.left = this.womanTrans.left = newVal[0].left
					this.manTrans.top = this.womanTrans.top = newVal[0].top
				} else if (this.runSex === 0) {
					this.womanTrans.left = newVal[0].left
					this.womanTrans.top = newVal[0].top
				} else if (this.runSex === 1) {
					this.manTrans.left = newVal[1].left
					this.manTrans.top = newVal[1].top
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	@keyframes move {
		0% {
			transform: scale(1);
		}

		50% {
			transform: scale(1.3);
		}

		100% {
			transform: scale(1);
		}
	}

	.chessboard {
		display: flex;
		padding: 100rpx 60rpx 60rpx;
		background-color: #000;
		height: 100vh;
		box-sizing: border-box;
		align-items: center;

		.content {
			flex: 1;

			.board-row {
				width: 100%;
				display: flex;

				.chess {
					margin: 10rpx 6rpx;
					flex: 1;
					border-radius: 10rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #fff;

					&.none,
					&.start {
						background-color: transparent !important;
						box-shadow: none !important;
					}

					&.border-top-left {
						border-top-left-radius: 30rpx;
					}

					&.border-bottom-left {
						border-bottom-left-radius: 30rpx;
						transform: ;
					}

					&.border-bottom-right {
						border-bottom-right-radius: 30rpx;
					}

					&.border-top-right {
						border-top-right-radius: 30rpx;
					}

					image {
						transform: translate(6px, -14px);
					}
				}
			}
		}

		.rules {
			position: absolute;
			background-color: rgba(255, 255, 255, .2);
			padding: 0 20rpx;
			border-radius: 10%;
			left: 50%;
			transform: translateX(-50%);
			color: #fff;

			.title {
				width: 50%;
				padding: 10rpx;
				background-color: #dd7e4e;
				margin: 0 auto;
				border-radius: 30rpx;
				border-top-left-radius: 0;
				border-top-right-radius: 0;
				text-align: center;
				margin-bottom: 20rpx;
			}

			.dice {
				display: flex;
				flex-direction: column;
				align-items: center;
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 40rpx;

				&.rolling image {
					transform: scale(1.4);
				}

				image {
					width: 120rpx;
					height: 120rpx;
					transition: all .5s;
				}

				.tip {
					color: #ccc;
					margin-top: 20rpx;
				}
			}
		}

		&>image {
			position: absolute;
			left: 0;
			top: 0;

			&.transition {
				transition: all 1s;
			}

			&.moving {
				animation: move 1s linear 0s infinite;
			}
		}
	}
</style>